<template>
	<div class="border-1px border-#E5E6EB border-solid rounded-12px p-20px">
		<p class="text-24px text-#000000 mb-20px font-bold">新手指引</p>
		<div class="flex justify-center">
			<div class="w-70%">
				<el-steps  :active="step"
				align-center>
					<el-step v-for="(item, index) in stepList" :key="index">
						<template #title>
							<div>
								<p class="text-#000000 text-20px mb-10px mt-20px">{{ item.title }}</p>
								<p class="text-14px text-#B5B5B5">{{ item.desc }}</p>
								<el-button color="#114CEE"
								v-show="step == (index+1)" @click="stepClick(item.url)">
									{{ item.btn }}
								</el-button>
							</div>
						</template>
					</el-step>
				</el-steps>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import useJump from '@/utils/jump';

const { jumpTo } = useJump();
const step = ref(1);
const stepList = ref<any[]>([
	{
		title:'身份认证',
		desc:'完成身份认证，获取更多权限',
		btn:'验证身份',
		url:'/authentication'
	},
	{
		title:'充值',
		desc:'单笔入金不低于100 USDT',
		btn:'验证身份'
	},
	{
		title:'交易',
		desc:'点对点交易，价格从优，支持多种本地支付方式',
		btn:'验证身份'
	}
])


const stepClick = (url:string) => {
	jumpTo(url)
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-step__head {
// 	display: flex !important;
// 	align-items: center !important;
// }

::v-deep .el-step__line-inner,
::v-deep .el-step.is-horizontal .el-step__line {
	height: 4px;
}

::v-deep .el-step.is-horizontal .el-step__line {
	margin-top: 6px;
}

::v-deep .el-step__line-inner {
	background-color: #114CEE;
}

::v-deep .el-step__icon {
	padding: 16px;
	background-color: #EBEBEB;
	border-color: #EBEBEB;
}

::v-deep .is-finish .el-step__icon {
	background-color: #114CEE;
	border-color: #114CEE;
	color: #fff;
}
</style>
